<template>
    <div :class="{'hid-slider': !isOpen}" class="app-container table-wrapper">
        <split-pane @resize="resize" :min-percent="2" :default-percent="defaultPercent" :max-percent="30" split="vertical" ref="split">
            <template slot="paneL">
                <slider :is-open="isOpen" class="slider-wrapper" @toggleSlider="toggleSlider">
                    <el-tabs v-model="leftTabName" @tab-click="handleLeftTabClick" class="left-tab">
                        <el-tab-pane label="查询管理" name="first">
                            <el-form ref="form" :model="filterData" label-width="10px">
                                <el-form-item label="">
                                    <h3>成立日期起始</h3>
                                    <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="filterData._INTERVAIL_MIN_ORGDEPARTMENT_CREATEDATE"/>
                                </el-form-item>
                                <el-form-item label="">
                                    <h3>成立日期结束</h3>
                                    <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="filterData._INTERVAIL_MAX_ORGDEPARTMENT_CREATEDATE"/>
                                </el-form-item>
                                <el-form-item label="">
                                    <h3>组织级别</h3>
                                    <el-select v-model="filterData.ORGDEPARTMENT_DEPGRADE" placeholder="请选择">
                                        <!-- dictTypeCode -->
                                        <el-option
                                            v-for="item in dictValues['sql|sql13']"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="searchForm()">查询</el-button>
                                    <el-button @click="resetForm()">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="入职管理树" name="second">
                            <el-tree
                                :props="treeProps"
                                :load="loadNode"
                                node-key="ORGVORGANIZATION_ID"
                                lazy
                                @node-click="handleNodeClick"
                                @check="handleCheck"
                                :filter-node-method="filterNode"
                                show-checkbox
                                check-strictly/>
                                <!-- check-strictly加上不关联，不加关联 -->
                        </el-tab-pane>
                    </el-tabs>
                </slider>
            </template>
            <template slot="paneR">
                <table-container
                    ref="table685"
                    class="right-content"
                    :form-id="formId"
                    :filter-data="filterData"
                    :common-placeholder="commonPlaceholder"
                    :show-row-column="showRowColumn"
                    :list="list"
                    :list-loading="listLoading"
                    :field-valid="fieldValid"
                    :button-list="buttonList"
                    :has-common-filter = "hasCommonFilter"
                    :fixed-columns = "fixedColumns"
                    @refresh="refresh"
                    @loadMore="loadMore"
                    @onSortClick="onSortClick"
                    @onRowButtonClick="onRowButtonClick">
                    <el-pagination
                        :current-page="pager.offset"
                        :page-sizes="[20, 30, 50, 100]"
                        :page-size="pager.limit"
                        :total="totalData"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"/>
                </table-container>
            </template>
        </split-pane>
        <el-dialog title="选择导入的Excel" v-if="dialogImportVisible" :visible.sync="dialogImportVisible">
            <import-data :import-excel-data="importExcelData"/>
        </el-dialog>
        <el-dialog title="导出字段" v-if="dialogExportVisible" :visible.sync="dialogExportVisible">
            <export-data :export-excel-data="exportExcelData"/>
        </el-dialog>
        <!-- dialogExcVisible -->
        <el-dialog title="选择公式" v-if="dialogExcVisible" :visible.sync="dialogExcVisible">
            <exc-solution :exc-solution-data="excSolutionData"/>
        </el-dialog>
    </div>
</template>

<script>
import slider from '@/components/table/slider'
import tableContainer from '@/components/table/table-container'
import pagination from '@/mixins/pagination'
import { queryTreeSolution } from '@/api/api'
import tableInterface from '@/mixins/tableInterface'
import split from '@/mixins/split'
import importData from '@/components/BtnPage/importData'
import exportData from '@/components/BtnPage/exportData'
import excSolution from '@/components/BtnPage/excSolution'

export default {
    name: 'table685',
    components: { slider, tableContainer, importData, exportData, excSolution },
    mixins: [pagination, tableInterface, split],
    data() {
        return {
            formId: '685',
            // 冻结列数量
            fixedColumns: 3,
            // 没有侧边为false
            isOpen: true,
            // tab默认显示哪个
            leftTabName: 'second',
            // 树的对应的显示字段
            treeProps: {
                label: 'ORGVORGANIZATION_cname',
                isLeaf: 'isLeaf'
            },
            // 树的查询条件
            tree: {
                ORGVORGANIZATION_ID: null,
                lv: null
            },
            // 所有字典的值
            dictValues: {},
            // 模糊搜索
            hasCommonFilter: true,
            commonFilter: '',
            commonPlaceholder: '人数,部门名称,部门编码',
            commonFilterArr: ['DEPVPEOPLECOUNT_NUM', 'ORGDEPARTMENT_CNAME', 'ORGDEPARTMENT_DEPCODE'],
            // 搜索字段
            filterData: {
                DEPVPEOPLECOUNT_NUM: '',
                ORGDEPARTMENT_CNAME: '',
                ORGDEPARTMENT_DEPCODE: '',
                ORGDEPARTMENT_DEPGRADE: '',
                _INTERVAIL_MAX_ORGDEPARTMENT_CREATEDATE: '',
                _INTERVAIL_MIN_ORGDEPARTMENT_CREATEDATE: ''
            },
            showRowColumn: [
                { formColumnId: '21116', relcolumnId: 'ORGDEPARTMENT_DEPCODE', columnId: 'ORGDEPARTMENT_DEPCODE', columnName: '组织编码' },
                { formColumnId: '21117', relcolumnId: 'ORGDEPARTMENT_CNAME', columnId: 'ORGDEPARTMENT_CNAME', columnName: '组织名称' },
                { formColumnId: '92068', relcolumnId: 'DEPVPEOPLECOUNT_NUM', columnId: 'DEPVPEOPLECOUNT_NUM', columnName: '人数' },
                { formColumnId: '21118', relcolumnId: 'ORGDEPARTMENT_ENAME', columnId: 'ORGDEPARTMENT_ENAME', columnName: '组织简称' },
                { formColumnId: '21122', relcolumnId: 'ORGDEPARTMENT_DEPTYPE', columnId: 'ORGDEPARTMENT_DEPTYPE_DICTNAME', columnName: '组织类型' },
                { formColumnId: '21121', relcolumnId: 'ORGDEPARTMENT_DEPGRADE', columnId: 'ORGDEPARTMENT_DEPGRADE_DICTNAME', columnName: '组织级别' },
                { formColumnId: '61637', relcolumnId: 'ORGDEPARTMENT_DEPAREA', columnId: 'ORGDEPARTMENT_DEPAREA_DICTNAME', columnName: '机构区域' },
                { formColumnId: '61638', relcolumnId: 'ORGDEPARTMENT_ISALLOW', columnId: 'ORGDEPARTMENT_ISALLOW_DICTNAME', columnName: '是否享受海岛津贴' },
                { formColumnId: '61639', relcolumnId: 'ORGDEPARTMENT_HANGLEADER', columnId: 'ORGDEPARTMENT_HANGLEADER_DICTNAME', columnName: '挂片领导' },
                { formColumnId: '61640', relcolumnId: 'ORGDEPARTMENT_ISPROTECT', columnId: 'ORGDEPARTMENT_ISPROTECT_DICTNAME', columnName: '是否保护期' },
                { formColumnId: '21124', relcolumnId: 'ORGDEPARTMENT_DEPKIND', columnId: 'ORGDEPARTMENT_DEPKIND_DICTNAME', columnName: '业务条线' },
                { formColumnId: '21123', relcolumnId: 'ORGDEPARTMENT_DEPCOST', columnId: 'ORGDEPARTMENT_DEPCOST_DICTNAME', columnName: '成本中心' },
                { formColumnId: '21119', relcolumnId: 'ORGDEPARTMENT_COMPID', columnId: 'ORGDEPARTMENT_COMPID_DICTNAME', columnName: '所属公司' },
                { formColumnId: '21120', relcolumnId: 'ORGDEPARTMENT_PARENTID', columnId: 'ORGDEPARTMENT_PARENTID_DICTNAME', columnName: '上级组织' },
                { formColumnId: '21134', relcolumnId: 'ORGDEPARTMENT_CREATEDATE', columnId: 'ORGDEPARTMENT_CREATEDATE_NEWDATE', columnName: '成立日期' },
                { formColumnId: '21132', relcolumnId: 'ORGDEPARTMENT_LEADER', columnId: 'ORGDEPARTMENT_LEADER_DICTNAME', columnName: '分管领导' },
                { formColumnId: '50755', relcolumnId: 'ORGDEPARTMENT_LEADERSHIP', columnId: 'ORGDEPARTMENT_LEADERSHIP_DICTNAME', columnName: '协管领导' },
                { formColumnId: '21130', relcolumnId: 'ORGDEPARTMENT_XORDER', columnId: 'ORGDEPARTMENT_XORDER', columnName: '排序' },
                { formColumnId: '21138', relcolumnId: 'ORGDEPARTMENT_REMARK', columnId: 'ORGDEPARTMENT_REMARK', columnName: '备注' },
                { formColumnId: '92069', relcolumnId: 'ORGDEPARTMENT_DISABLEDDATE', columnId: 'ORGDEPARTMENT_DISABLEDDATE', columnName: '失效日期' },
                { formColumnId: '83907', relcolumnId: 'ORGDEPARTMENT_UPDATETIME', columnId: 'ORGDEPARTMENT_UPDATETIME_NEWDATE', columnName: '最近修改日期' },
                { formColumnId: '61762', relcolumnId: 'ORGDEPARTMENT_ISFININSTITU', columnId: 'ORGDEPARTMENT_ISFININSTITU_DICTNAME', columnName: '是否人行金融机构' },
                { formColumnId: '61763', relcolumnId: 'ORGDEPARTMENT_FININSTITU', columnId: 'ORGDEPARTMENT_FININSTITU', columnName: '人行金融机构代码' },
                { formColumnId: '61764', relcolumnId: 'ORGDEPARTMENT_WEBNUM', columnId: 'ORGDEPARTMENT_WEBNUM', columnName: '网点号' },
                { formColumnId: '61765', relcolumnId: 'ORGDEPARTMENT_PROAGENCCODE', columnId: 'ORGDEPARTMENT_PROAGENCCODE', columnName: '省联社机构代码' },
                { formColumnId: '84140', relcolumnId: 'ORGDEPARTMENT_MANAGEREGION', columnId: 'ORGDEPARTMENT_MANAGEREGION_DICTNAME', columnName: '管辖区域' }
            ],
            list: [],
            listLoading: true,
            // 字段权限
            fieldValid: {},
            buttonValid: {},
            buttonList: [
                { buttonName: '编辑', icon: 'el-icon-plus', buttonId: 2414, colorType: 'primary' },
                { buttonName: '新增', icon: 'el-icon-search', buttonId: 2414, colorType: 'primary' },
                { buttonName: '删除', icon: 'el-icon-delete', buttonId: 2414, colorType: 'primary' },
                { buttonName: '查看', icon: 'el-icon-plus', buttonId: 2414, colorType: 'primary' },
                { buttonName: '下载', icon: 'el-icon-download', buttonId: 2414, colorType: 'primary' },
                { buttonName: '下载2', icon: 'el-icon-download', buttonId: 2414, colorType: 'primary' },
                { buttonName: '下载3', icon: 'el-icon-download', buttonId: 2414, colorType: 'primary' },
                { buttonName: '下载4', icon: 'el-icon-download', buttonId: 2414, colorType: 'primary' }
            ],
            requestParam: {
                'ORGVORGANIZATION_DEPCODE': ''
            },
            sortParams: {},
            dialogImportVisible: false,
            importExcelData: {
                formId: 2057,
                templateFileid: 1022,
                templateFilename: '新员工入职登记导入模板(红色字段为必填字段).xls',
                buttonId: 2954
            },
            dialogExportVisible: false,
            exportExcelData: {
                formId: 2057,
                formFieldsize: 0,
                filename: '新员工入职列表',
                buttonId: 6805,
                filterData: this.filterData,
                requestParam: this.requestParam
            },
            dialogExcVisible: false,
            excSolutionData: {
                formId: 4924,
                formButtonId: 8585
            }
        }
    },
    async created() {
        this.$eventBus.$on('common-filter', (...args) => {
            // todo something
            console.log(args[0])
            this.commonFilter = args[0]
            this.commonFilterArr.forEach(item => {
                this.filterData[item] = this.commonFilter
            })
        }, this)
    },
    methods: {
        searchForm() {
            this._cardformInitData()
        },
        resetForm() {
            this.filterData = {
                DEPVPEOPLECOUNT_NUM: '',
                ORGDEPARTMENT_CNAME: '',
                ORGDEPARTMENT_DEPCODE: '',
                ORGDEPARTMENT_DEPGRADE: '',
                _INTERVAIL_MAX_ORGDEPARTMENT_CREATEDATE: '',
                _INTERVAIL_MIN_ORGDEPARTMENT_CREATEDATE: ''
            }
        },
        toggleSlider(val) {
            this.isOpen = !val
            this.defaultPercent = val ? 2 : 20
            console.log(this.defaultPercent)
            this.$refs.split.onSetPercent(this.defaultPercent)
        },
        handleLeftTabClick(tab, event) {
            console.log(tab, event)
        },
        // 懒加载树节点数据
        loadNode(node, resolve) {
            console.log(node)
            if (node.level !== 0) {
                this.tree.ORGVORGANIZATION_ID = node.key
                this.tree.lv = node.level - 1
            }
            queryTreeSolution(16, 'ORGVORGANIZATION_ID', this.tree.ORGVORGANIZATION_ID, this.tree.lv)
                .then(res => {
                    res.forEach(item => {
                        item.isLeaf = !item.isParent
                    })
                    resolve(res)
                })
        },
        // 过滤树节点
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        handleNodeClick(data) {
            console.log(data)
        },
        handleCheck(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
            console.log(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys)
        },
        refresh() {
            this.listLoading = true
            this.pager.offset = 1
            this._cardformInitData()
        },
        loadMore() {
            this._cardformInitData('loadMore')
        },
        onRowButtonClick(e) {
            // list为一个数组
            console.log(e)
            this.$router.push({
                path: '/iframe/urlPath',
                query: {
                    src: 'https://www.baidu.com'
                }
            })
        },
        onSortClick(e) {
            this.sortParams = {}
            this.sortParams[e.prop] = e.order === 'ascending' ? 'asc' : 'desc'
            this._cardformInitData()
        }
    }
}
</script>

